<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=devie-width,initial-scale=1.0,user-scalable=no,
		maximum-scale=1.0,minmum-scale=1.0" />
		<title>解决你的选择困难症</title>
		<style>
			
			p{
				width:100%;
				height:20px;
				font-size: 20px;
			}
			input {
				margin-top: 10px;
				display: none;
				width:70%;
				height:40px;
				font-size: 10px;
			}
			button{
				margin-top: 10px;
				width:30%;
				height:50px;
				font-size: 10px;
				background-color: pink;
				border-radius:50px;
				border:0;
			}
			.tj{
				display: none;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<p class="wt">随机提问器</p>
			<p class="dan"></p>
		</div>
		<button class="ready">开始</button>
		<button class="end">结束</button>
		<button class="box1">改变问题</button>
		<input type="text" value="输入你要改变的问题"/>
		
		<input type="text" value="输入选项,用空格分开选项" class="input1"/>
		<button class="tj">提交</button>
		<script>
			const data = ['是','不是'];
			let wt = document.querySelector('.wt');
			let dan = document.querySelector('.dan');
			let box = document.querySelector('.box');
			let box1 = document.querySelector('.box1');
			let ready = document.querySelector('.ready');
			let end = document.querySelector('.end');
			let input = document.querySelector('input');
			let tj = document.querySelector('.tj');
			let input1 = document.querySelector('.input1');
			end.disabled = true ;
			function cn(){
				let s = Math.floor(Math.random()*data.length)
				dan.innerHTML = data[s];
			}
			ready.addEventListener('click',function(){
				var dsq = setInterval(cn,50);
				ready.disabled = true ;
				end.disabled = false ;
				end.addEventListener('click',function(){
					clearInterval(dsq);
					ready.disabled = false;
					end.disabled = true ;
				})
			})
			box1.addEventListener('click',function(){
				input.style.display = 'block';
				tj.style.display = 'block';
				input1.style.display = 'block';
			})
			input.addEventListener('click',function(){
				this.value = '';
				input1.value = '';
			})
			
			tj.addEventListener('click',function(){
				if(input.value == ''){
					wt.innerHTML = '随机提问';
					dan.innerHTML = '你还没输入问题';
				}else{
					wt.innerHTML = '问题：'+input.value;
					let i = 0;
					  while (i < data.length) {
					    data.pop();
					  }
					let p = input1.value.split(" ")
					let o = 0;
					while (o < p.length) {
					  data.push(p[o]);
					  o++;
					}
					}
				input.style.display = 'none';
				input1.style.display = 'none';
				tj.style.display = 'none';
				 input.value = '';
				 input1.value = '';
			})
		</script>
	</body>
</html>